<template>
  <div class="banner" ref="container">
    <span class="carousel_arrow carousel_arrow_left" @click="prePage">
      <i class="el-icon-arrow-left"></i>
    </span>
    <span class="carousel_arrow carousel_arrow_right" @click="nextPage">
      <i class="el-icon-arrow-right"></i>
    </span>
    <div
      class="banner-trans is-animating"
      :style="{
        transform: moveTransform,
        transition: 'transform 400 ms',
      }"
    >
      <div class="banner-item"
           :style="{width:'160px',transform:dataSource[index].translate||'',
           transition:'transform 400 ms'
      }"
           v-for="(item,index) in dataSource" :key="item" ref="bannerItems">
        <span style="vertical-align: center">
        {{ "banner" + index }}
          </span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
//跑马灯--横向
const props = defineProps({
  cardData: {
    type: Array,
    default: []
  },
  autoplay: {
    type: Boolean,
    default: false,
    desc: "是否自动播放"
  },
  interval: {
    type: Number,
    default: 3000,
    desc: "自动切换的时间间隔，单位为毫秒"
  },
  direction: {
    type: String,
    default: "horizontal",
    desc: "走马灯展示的方向"
  },
  gutter: {
    type: Number,
    default: 1,
    desc: "间距"
  },
  itemWidth: {
    type: Number,
    default: 160,
    desc: "card宽度"
  }
});
let index = 0;
let cardLength = 0;
let perWidth = 200;
let moveTransform = ref<string>();
let translateX = 0;
let sumWidth = 600;

const { cardSum, autoplay, direction, interval, gutter, itemWidth, cardData } = toRefs(props);
const container = ref<any>();
const bannerItems = ref<any>();

// 操作数据后更新视图
for (let i = 0; i < 12; i++) {
  cardData.value.push({ index: i, translate: "" });
}

const dataSource = ref([]);
dataSource.value = cardData.value;
onMounted(() => {
  cardLength = cardData.value.length;
  perWidth = itemWidth.value + gutter.value * 2;
  sumWidth = container.value.clientWidth;
  // animate();
});

const nextPage = () => {
  debugger
  console.log(cardData.value[cardLength - index - 1]);
  if (cardLength * perWidth + translateX <= sumWidth) {
    return;
  }
  if (index < cardLength) {
    index++;
  } else {
    index = 0;
  }
  animate(true);
};
const prePage = () => {
  if (index > 0) {
    index--;
  } else {
    index = 0;
    return;
  }
  animate(false);

  // if (proxy.autoplay) {
  //   setTimeout(() => {
  //     that.index++;
  //     animate();
  //   }, that.interval);
  // }
};
const animate = (isnext) => {

  let a, b = 0; // x,y
  if (index == cardLength) {
    index = 0;
    a = b = 0;
  } else {
    a = -1 * index * perWidth; // x
    b = -1 * 10; // y
  }
  translateX = a;
  getTransform(a, b, isnext);
};
const getTransform = (a: number, b: number, isnext) => {
  if (direction.value === "horizontal") {
    moveTransform.value = "translateX(" + a + "px) scale(1)";
    dataSource.value = dataSource.value.map(x => ({ ...x, translate: "translate(0, " + b + "px) scale(0.83)" }));
    dataSource.value[index + 1].translate = "translate(0) scale(1)";
    // dataSource.value[index-1].translate = {width:'160px',transform:`translate(${(cardLength-1)*perWidth}px,0) scale(1);`};

    // bannerItems.value[index-1].className = 'banner-item normal'
    // bannerItems.value[index].className = 'banner-item showout'
    // bannerItems.value[index+1].className = 'banner-item normal'

  } else {
    moveTransform.value = "translateY(" + a + "px) scale(1)";
    dataSource.value[index].translate = "translateX(" + b + "px) scale(1)";
  }
};
</script>

<style scoped>
/*左右滚动*/
.banner {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;

}

.banner-trans {
  width: 100%;
  height: 100%;
  background: transparent;
  display: block;
  margin: 0 auto;
  white-space: nowrap;
  position: relative;
}

.banner-trans > div {
  display: inline-block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  background-color: #eee;
  white-space: nowrap;
}

.banner-item {
  background-color: #eee;
  width: 160px;
  left: -50px;
  border: 1px solid #eee;
  border-radius: 10px;
  margin: 2px 1px;
  transform: translate(0) scale(.83);

}

.banner-item > span {
  top: 38%;
  position: absolute;
  left: 30%;
}

.banner-item.showout {
  z-index: 5;
  background-color: gray;
  opacity: 0.83;
}

.banner-item.normal {
  z-index: 1;
  background-color: #eee;
  opacity: 1;
}

.carousel_arrow {
  height: 36px;
  line-height: 36px;
  width: 36px;
  cursor: pointer;
  transition: 0.3s;
  border-radius: 50%;
  background-color: rgba(31, 45, 61, 0.11);
  color: #fff;
  position: absolute;
  top: 50%;
  z-index: 10;
  transform: translateY(-50%);
  text-align: center;
  font-size: 12px;
}

.carousel_arrow_left {
  left: 6px;
}

.carousel_arrow_right {
  right: 6px;
}

.is-animating {
  -webkit-transition: -webkit-transform 0.4s ease-in-out;
  transition: -webkit-transform 0.4s ease-in-out;
  transition: transform 0.4s ease-in-out;
  transition: transform 0.4s ease-in-out, -webkit-transform 0.4s ease-in-out;
}
</style>